<%--
  Created by IntelliJ IDEA.
  User: stars
  Date: 2022/8/20
  Time: 11:16
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有间花店 | 后台管理</title>
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <!-- 引入css样式-->
    <link rel="stylesheet" type="text/css" href="css/admin.css"
          media="screen">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/admin.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<style type="text/css">
    a:focus, a:hover {
        text-decoration: none;
    }

    .panel-body {
        text-align: left;
    }

    textarea {
        resize: none;
    }

    #mytable th, #mytable td {
        text-align: center;
        vertical-align: middle;
        font-size: 14px;
    }
    /*点击修改出现提示框*/
    .click {
        margin-top: -320px;
        margin-right: 48px;
        float: right;
    }

    .modal-open .modal {
        overflow-y: hidden;
        width: 620px;
        height: 440px;
        margin-top: 90px;
        margin-left: 440px;
        border-radius: 10%;
        border: 1px solid #cccccc;
        background: #CAE8EA;
        display: none;
    }

    .photo img {
        width: 70px;
        height: 70px;
        border: transparent;
        text-align: center;
    }
</style>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .chat_commento{
        width: 470px;
        height: 650px;
        margin: auto;
        border-radius: 10px;
        border: 2px solid #f4f5f7;
    }
    .clearfix::after{
        content: "";
        display: block;
        clear: both;
        width: 0;
        height: 0;
        line-height: 0;
        visibility: hidden;
    }
    /* top */
    .chat_top{
        width: 100%;
        height: 50px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding-left: 20px;
        font-size: 20px;
        line-height: 50px;
        box-sizing: border-box;
        font-weight: 550;
        border-width: 0px;
    }
    /* middle */
    /* 左边 */
    .chat_middle{
        width: 450px;
        height: 455px;
        position: relative;
        box-sizing: border-box;
        overflow: auto;
        border-width: 0px;
    }
    .chat_left{
        width: 100%;
        height: 120px;
        margin-top: 20px;
    }
    .chat_left_item_1{
        width: 50px;
        height: 50px;
        background-color: #4459AB;
        float: left;
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 10px;
        text-align: center;
        line-height: 50px;
        color: white;
        border-radius: 25px;
    }
    .chat_left_item_2{
        width: 55%;
        height: 100px;
        float: left;
        margin-top: 10px;
    }
    .chat_left_item_2 .chat_left_chat{
        float: left;
    }
    .chat_left_item_2 .chat_left_content{
        padding: 15px;
        margin-top: 10px;
        background-color: #f4f5f7;
        display: inline-block;
        border-radius: 10px;
        border-top-left-radius: 0px;
    }
    /* 右边 */
    .chat_right{
        width: 100%;
        height: 120px;
        margin-top: 20px;
    }
    .chat_right_item_1{
        width: 50px;
        height: 50px;
        background-color: #4459AB;
        float: right;
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 10px;
        text-align: center;
        line-height: 50px;
        color: white;
        border-radius: 25px;
    }
    .chat_right_item_2{
        width: 55%;
        height: 100px;
        float: right;
        margin-top: 10px;
    }
    .chat_right_time{
        width: 100%;
        text-align: right;
    }
    .chat_right_content{
        float: right;
        padding: 15px;
        border-radius: 10px;
        margin-top: 10px;
        border-top-right-radius: 0px;
        background-color: #4F7cff;
        color: white;
    }
    /* foot */
    .chat_foot{
        width: 450px;
        height: 130px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        position: relative;
    }
    .chat_context{
        width: 100%;
        height: 100%;
        font-size: 17px;
        box-sizing: border-box;
        outline: none;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-width: 0px;
        padding: 16px;
    }
    .chat_commit{
        width: 80px;
        height: 30px;
        color: white;
        background-color: #4F7cff;
        line-height: 30px;
        text-align: center;
        border-radius: 5px;
        position: absolute;
        right: 10px;
        bottom: 20px;
        margin-right: 10px;
    }
    .chat_context{
        resize: none;
    }
    .chat_context::placeholder{
        color: black;
        font-weight: 500k;
    }
    .line{
        width: 100%;
        border-top: 1px;
        border-color: #f4f5f7;
        border-style: solid;
    }
</style>
<body>
<!-- entry -->
<div class="wrap">
    <!-- 左边内容 -->
    <jsp:include page="/admin_menu.jsp"></jsp:include>

    <!-- 右边内容 -->
    <div id="right" class="tab-content right">

        <!-- 模块一商品查询-->
        <div>
            <!-- 头部商品查询框-->
            <div class="panel panel-info">
                <div class="panel-heading">位置：用户咨询</div>
            </div>
        </div>
        <div class="chat_commento">
            <!-- top -->
            <div class="chat_top">
                用户咨询
            </div>
            <!-- line -->
            <div class="line"></div>
            <!-- middle -->
            <div class="chat_middle" id="chat_middle_item">
                <!-- 左边 -->
                <!-- l_2 -->
                <div class="chat_right">
                    <div class="chat_right_item_1 "><img  src="product\touxiang\6ab700c8-54d2-4c3e-a680-1daa2b5cf7cb.jpg" style="width: 100%;height: 100%;"/></div>
                    <div class="chat_right_item_2">
                        <div class="chat_right_time">小客服</div>
                        <div class="chat_right_content">
                            我是有间花店小客服,有什么问题就快来咨询我吧!
                        </div>
                    </div>
                </div>
                <c:forEach items="${Dialogues}" var="dialogue">
                <div class="chat_left clearfix">
                    <div class="chat_left_item_1 "><img  src="product\touxiang\6ab700c8-54d2-4c3e-a680-1daa2b5cf7cb.jpg" style="width: 100%;height: 100%;"/></div>
                    <div class="chat_left_item_2">
                        <div class="chat_time">客户</div>
                        <div class="chat_left_content">
                            ${dialogue.userdialogue}
                        </div>
                    </div>
                </div>
                </c:forEach>
            </div>

            <!-- line -->
            <div class="line"></div>
            <!-- foot -->
            <div class="chat_foot">
                <!-- context -->
                <textarea class="chat_context" id="chat_context_item" cols="30" rows="10" placeholder="请输入"></textarea>
                <div class="chat_commit" id="button">发送</div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    // 成功发送
    var send_message=document.getElementById("chat_middle_item");
    var domBtm=document.getElementById("button");
    // 发送内容
    var message=document.getElementById("chat_context_item");
    domBtm.addEventListener("click",function(){
        var str=message.value;
        var date=new Date();
        var hour=date.getHours();
        var mm=date.getMinutes();
        var time=hour+':'+mm;
        var ans='<div class="chat_right_item_1 clearfix"><img  src="product/touxiang/6ab700c8-54d2-4c3e-a680-1daa2b5cf7cb.jpg" " style="width: 100%;height: 100%;"/></div>'+
            '<div class="chat_right_item_2">'+
            '<div class="chat_right_time clearfix">'+time+'</div>'+
            '<div class="chat_right_content clearfix">'+str+'</div>'
            +'</div>';
        var oLi=document.createElement("div");
        oLi.setAttribute("class","chat_right");
        oLi.innerHTML=ans;
        send_message.append(oLi);
        alert(str)
        $.get("/")
        message.value="";
    });
   /* $("#button").click(function () {
        var message=document.getElementById("chat_context_item");
        var str=message.value;
        alert(str)
    })*/
</script>
</html>
